<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }

        .box1 {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 
        class
            1. 可以本身有一个class 然后再绑定一个class. vue会将两份class拼接来使用
     -->

    <div id="app">
        <!-- 其他属性没有这种拼接的特点 -->
        <p title="hello" :title="a1">我是一个屁</p>

        <!-- :calss 字符串用法 -->
        <div class="box" :class="'box2 ' + a1">帅威</div>

        <!-- :calss 对象的用法 key：类名 value: boolean -->
        <div class="box" :class="{box1: isAdd, box2: xxx}">帅威</div>

        <!-- :calss 数组的用法  -->
        <div class="box" :class="['l1', a1, { l2: age > 18 }]">帅威</div>

        <!-- :style 对象的用法(样式对象)。kye: css属性，需要转换成驼峰写法 -->
        <div class="box" :style="{fontSize: fontSize + 'px'}">帅威</div>
        <div class="box" :style="{fontSize: fontSize2}">帅威</div>

        <!-- :style 数组的用法，每一项是个样式对象 -->
        <div class="box" :style="[{fontSize: '20px', a: '18'}, {backgroundColor: 'red'}]">帅威</div>



        <div class="box" :class="classObj">帅威</div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                a1: 'box1',
                isAdd: true,
                xxx: true,
                age: 18,

                fontSize: 40,
                fontSize2: '40px',

                classObj: { box1: true, box2: false },
                arr: [
                    'box1',
                    {
                        box2: true
                    }
                ]
            }
        })
    </script>
</body>

</html>